<!--As5-->
<!--5、药品金额、数量及DDDs趋势分析表-->
<!--
全院药品趋势1
科室趋势2
医疗组趋势3
医生趋势4
-->

<template>
  <div class="query">
    <div class="check">
      <div class="c_right">
        <!--        name设置为target尾缀，target和iframe保持一致-->
        <el-form id="my-profile" name="as5" method="post" target="reportFrameAs5">
          <!--          按钮类型-->
          <el-form-item style="display: none" name="groupType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">按钮类型</span>
                <el-input v-model="groupType" name="groupType" />
              </div>
            </div>
          </el-form-item>
          <!--          医院编码-->
          <el-form-item style="display: none" name="hospital_code">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">医院编码</span>
                <el-input v-model="hospital_code" name="hospital_code" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <!--          标题-->
          <el-form-item style="display: none" name="header">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">标题</span>
                <el-input v-model="header" name="header" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <!--          制表时间-->
          <el-form-item style="display: none" name="tabTime">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">制表时间</span>
                <el-input v-model="tabTime" name="tabTime" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <!--          制表人-->
          <el-form-item style="display: none" name="lister">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">制表人</span>
                <el-input v-model="lister" name="lister" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <!--          医疗机构（医院名称）-->
          <el-form-item style="display: none" name="medical">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">医疗机构</span>
                <el-input v-model="medical" name="medical" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <!--          医疗机构（医院名称）-->
          <el-form-item style="display: none" name="StatisticsList">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">统计列表名（三级菜单名）</span>
                <el-input v-model="StatisticsList" name="StatisticsList" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>

          <!--          收费时间-->
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">收费时间</span>
                <el-date-picker
                  v-model="data.chargeTimeStart"
                  name="chargeTimeStart"
                  type="month"
                  placeholder="选择日期"
                  value-format="yyyy-MM"
                  format="yyyy-MM"
                  style="width: 143px;"
                />
                <span style="padding: 0 1px">至</span>
                <el-date-picker
                  v-model="data.chargeTimeEnd"
                  name="chargeTimeEnd"
                  type="month"
                  placeholder="选择日期"
                  value-format="yyyy-MM"
                  format="yyyy-MM"
                  style="width: 143px;"
                />
              </div>
            </div>
          </el-form-item>

          <!--          监测方式-->
          <el-form-item style="display: none" name="detectionType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">监测方式传值</span>
                <el-input v-model="data.detectionType" name="detectionType" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <el-form-item name="detectionType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">监测方式</span>
                <el-radio-group v-model="data.detectionType" name="detectionType">
                  <el-radio :label="1">按月度</el-radio>
                  <el-radio :label="2">按季度</el-radio>
                  <el-radio :label="3">按半年</el-radio>
                  <el-radio :label="4">按年度</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-form-item>
          <!--                    统计类型-->
          <el-form-item style="display: none" name="statisticsType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">统计类型传值</span>
                <el-input v-model="data.statisticsType" name="statisticsType" clearable class="c_search" type="text" />
              </div>
            </div>
          </el-form-item>
          <el-form-item name="statisticsType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">统计类型</span>
                <el-radio-group v-model="data.statisticsType" name="statisticsType">
                  <el-radio :label="1">按金额</el-radio>
                  <el-radio :label="2">按数量</el-radio>
                  <el-radio :label="3">按DDDs</el-radio>
                </el-radio-group>
              </div>
            </div>
          </el-form-item>

          <!--          开嘱医生显示-->
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">开嘱医生</span>
                <el-input v-model="data.doctorName" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
                <i class="c_searchbtn" @click="selectPop('医生')">选择</i>
                <i class="c_searchbtn_clear" @click="clearhandleGetDoctor">清空</i>
              </div>
            </div>
          </el-form-item>
          <!--          开嘱医生传值-->
          <el-form-item style="display: none" name="doctorCode">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">开嘱医生</span>
                <el-input v-model="data.doctorCode" name="doctorCode" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
              </div>
            </div>
          </el-form-item>

          <!--          自定义药品属性显示和传值都为中文-->
          <el-form-item name="typeName">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">自定义药品属性</span>
                <el-input v-model="data.typeName" name="typeName" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
                <i class="c_searchbtn" @click="selectPop('自定义药品属性')">选择</i>
                <i class="c_searchbtn_clear" @click="clearhandleGetDrugType">清空</i>
              </div>
            </div>
          </el-form-item>

          <!--          药品类别显示用-->
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">药品类别</span>
                <el-input v-model="data.clasStitle" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
                <i class="c_searchbtn" @click="selectPop('药品类别')">选择</i>
                <i class="c_searchbtn_clear" @click="clearhandleGetDrugDnc">清空</i>
              </div>
            </div>
          </el-form-item>
          <!--          药品类别传值-->
          <el-form-item name="clasStitle" style="display: none">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">药品类别</span>
                <el-input v-model="data.clasStitlecode" name="clasStitle" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
              </div>
            </div>
          </el-form-item>

          <!--          药品-->
          <el-form-item name="uniqueCode">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">药品</span>
                <el-input v-model="data.uniqueCode" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
                <i class="c_searchbtn" @click="selectPop('药品')">选择</i>
                <i class="c_searchbtn_clear" @click="clearhandleGetDrug">清空</i>
              </div>
            </div>
          </el-form-item>
          <!--          药品传值-->
          <el-form-item name="uniqueCode" style="display: none">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">药品</span>
                <el-input v-model="data.uniqueCodecode" name="uniqueCode" readonly="readonly" clearable class="c_search" type="text" placeholder="请选择" />
              </div>
            </div>
          </el-form-item>

          <!--          类型-->
          <el-form-item style="display: none" name="patientType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">传值</span>
                <el-input v-model="data.patientType" name="patientType" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">类型</span>
                <el-checkbox-group v-model="data.patientType1" class="c_checkbox">
                  <el-checkbox v-for="(item,index) in patientTypeList1" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>

                <el-checkbox-group v-model="data.patientType2" class="c_checkbox">
                  <el-checkbox v-for="(item,index) in patientTypeList2" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <!--          药品类型-->
          <el-form-item style="display: none" name="drugType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">传值</span>
                <el-input v-model="data.drugType" name="drugType" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">药品类型</span>
                <el-checkbox-group v-model="data.drugType" class="c_checkbox">
                  <el-checkbox v-for="(item,index) in drugTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <!--          药品剂型-->
          <el-form-item style="display: none" name="drugForm">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">传值</span>
                <el-input v-model="data.drugForm" name="drugForm" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">药品剂型</span>
                <el-checkbox-group v-model="data.drugForm" class="c_checkbox">
                  <el-checkbox v-for="(item,index) in drugFormList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <!--          抗菌药类型-->
          <el-form-item style="display: none" name="antiType">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">传值</span>
                <el-input v-model="data.antiType" name="antiType" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">抗菌药类型</span>
                <el-checkbox-group v-model="data.antiType" class="c_checkbox">
                  <el-checkbox v-for="(item,index) in antiTypeList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>
          <!--          抗菌药级别-->
          <el-form-item style="display: none" name="antiLev">
            <div class="clear">
              <div class="fl">
                <span class="c_tip">传值</span>
                <el-input v-model="data.antiLev" name="antiLev" />
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="clear">
              <div class="fl">
                <span class="c_tip">抗菌药级别</span>
                <el-checkbox-group v-model="data.antiLev" class="c_checkbox">
                  <el-checkbox v-for="(item,index) in antiLevList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form-item>

          <!--          按钮-->
          <el-form-item>
            <div class="sbtn_box">
              <el-button size="small" type="primary" @click="onSubmit(moneyNumAll,'全院药品趋势',1)">全院药品趋势</el-button>
              <el-button size="small" type="primary" @click="onSubmit(moneyNumDept,'科室趋势',2)">科室趋势</el-button>
              <el-button size="small" type="primary" @click="onSubmit(moneyNumMedgroup,'医疗组趋势',3)">医疗组趋势</el-button>
              <el-button size="small" type="primary" @click="onSubmit(moneyNumDoctor,'医生趋势',4)">医生趋势</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="95%"
      @close="closeVisible"
    >
      <!--      修改name-->
      <iframe id="reportFrameAs5" name="reportFrameAs5" width="1390" height="980" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeVisible">确 定</el-button>
      </span>
    </el-dialog>
    <Poptable
      ref="ptable"
      :p-type="pType"
      ctype="zy"
      @handleGetMedgroup="handleGetMedgroup"
      @handleGetDrugType="handleGetDrugType"
      @handleGetDept="handleGetDept"
      @handleGetDrugDnc="handleGetDrugDnc"
      @handleGetDrug="handleGetDrug"
      @handleGetDoctor="handleGetDoctor"
    />
  </div>
</template>

<script>
import Poptable from '../../childComps/poptable'
export default {
  name: 'As5',
  components: {
    Poptable
  },
  data() {
    return {
      dialogTitle: '',
      groupType: 0, // 必传 全院药品趋势1 科室趋势2 医疗组趋势3 医生趋势4
      hospital_code: '', // 医院编码
      header: '', // 标题
      tabTime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),	// 制表时间
      lister: '制表人', // 	制表人
      medical: 1, // 医疗机构（医院名称）
      StatisticsList: '药品金额、数量及DDDs趋势分析表', // 统计列表名（三级菜单名）

      // 全院药品趋势1
      moneyNumAll: 'http://yuwenbincl.xicp.net:19133/webroot/ReportServer?reportlet=/reasonableIndex/moneyNumAll.cpt',
      // 科室趋势2
      moneyNumDept: 'http://yuwenbincl.xicp.net:19133/webroot/ReportServer?reportlet=/reasonableIndex/moneyNumDept.cpt',
      // 医疗组趋势3
      moneyNumMedgroup: 'http://yuwenbincl.xicp.net:19133/webroot/ReportServer?reportlet=/reasonableIndex/moneyNumMedgroup.cpt',
      // 医生趋势4
      moneyNumDoctor: 'http://yuwenbincl.xicp.net:19133/webroot/ReportServer?reportlet=/reasonableIndex/moneyNumDoctor.cpt',
      data: {
        chargeTimeStart: '', // 		开始收费时间
        chargeTimeEnd: '', // 		  结束收费时间
        detectionType: 1, // number  必选 单选 监测方式 1月度 2季度 3 半年 4 年度
        statisticsType: 1, // number  必选 单选 统计类型 1金额 2数量 3DDDS
        patientType: [], //	类型  0是门诊 1是急诊 2是出院 3是住院
        patientType1: [0], //	类型  0是门诊 1是急诊 2是出院 3是住院
        patientType2: [], //	类型  0是门诊 1是急诊 2是出院 3是住院
        doctorCode: [], // 开嘱医生
        doctorName: [], // 开嘱医生显示中文用
        typeName: [], // 自定义药品属性 传中文
        clasStitle: [], // 药品类别
        uniqueCode: [], // 药品
        drugType: [], // 	药品类型
        drugForm: [], // 	药品剂型
        antiType: [], // 抗菌药类型
        antiLev: [] // 	抗菌药级别
      },
      drugTypeList: [{
        value: 1,
        label: '中成药'
      }, {
        value: 2,
        label: '中药饮片'
      }, {
        value: 3,
        label: '化学药品'
      }, {
        value: 4,
        label: '生物药剂'
      }],
      drugFormList: [{
        value: 1,
        label: '注射剂型'
      }, {
        value: 2,
        label: '口服剂型'
      }, {
        value: 3,
        label: '其他剂型'
      }],
      antiTypeList: [{
        value: 1,
        label: '抗细菌药'
      }, {
        value: 2,
        label: '抗真菌药'
      }, {
        value: 3,
        label: '抗结核药/抗麻风药'
      }, {
        value: 4,
        label: '其他抗菌药'
      }],
      antiLevList: [{
        value: 1,
        label: '非限制使用'
      }, {
        value: 2,
        label: '限制使用'
      }, {
        value: 3,
        label: '特殊使用'
      }],
      // 类型
      patientTypeList1: [{
        value: 0,
        label: '门诊'
      }, {
        value: 1,
        label: '急诊'
      }],
      patientTypeList2: [{
        value: 2,
        label: '出院'
      }, {
        value: 3,
        label: '住院'
      }],
      routeTypeList: [{
        value: 1,
        label: '排除'
      }],
      outList: [{
        value: 1,
        label: '排除'
      }],
      dialogVisible: false,
      pType: '11',
      sbtnFlag: false
    }
  },
  watch: {
    'data.patientType1': {
      handler: function(val, oldVal) {
        if (val.length > 0) {
          // 清空要删除的数组
          this.data.patientType.splice(0, this.data.patientType.length)
          // 清空互斥数组
          this.data.patientType2.splice(0, this.data.patientType2.length)
          for (var i = 0; i < this.data.patientType1.length; i++) {
            this.data.patientType.push(this.data.patientType1[i])
          }
        }
      },
      deep: true
    },
    'data.patientType2': {
      handler: function(val, oldVal) {
        if (val.length > 0) {
          // 清空要删除的数组
          this.data.patientType.splice(0, this.data.patientType.length)
          // 清空互斥数组
          this.data.patientType1.splice(0, this.data.patientType1.length)
          for (var i = 0; i < this.data.patientType2.length; i++) {
            this.data.patientType.push(this.data.patientType2[i])
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    const userInfo = localStorage.getItem('user')
    this.lister = JSON.parse(userInfo).real_name
    this.hospital_code = JSON.parse(userInfo).his_code
    this.medical = JSON.parse(userInfo).his_name
  },
  activated() {
    const userInfo = localStorage.getItem('user')
    this.lister = JSON.parse(userInfo).real_name
    this.hospital_code = JSON.parse(userInfo).his_code
    this.medical = JSON.parse(userInfo).his_name
  },
  methods: {
    onSubmit(startUrlValue, dialogTitleName, queryTypeVal) {
      if (this.data.chargeTimeStart > this.data.chargeTimeEnd) {
        this.$message({
          message: '注意！您选择的结束时间小于开始时间，请重新选择',
          type: 'warning'
        })
        this.data.chargeTimeEnd = ''
      } else if (this.data.chargeTimeStart === '' || this.data.chargeTimeEnd === '' ||
          this.data.chargeTimeStart === null || this.data.chargeTimeEnd === null) {
        this.$message({
          message: '请选择时间范围',
          type: 'warning'
        })
      } else if (this.data.patientType.length === 0 || (this.data.patientType1.length === 0 && this.data.patientType2.length === 0)) {
        this.$message({
          message: '请选择类型',
          type: 'warning'
        })
      } else {
        this.groupType = queryTypeVal
        this.header = this.StatisticsList + '（' + encodeURIComponent(dialogTitleName) + '）'
        this.dialogTitle = this.StatisticsList + '（' + dialogTitleName + '）'
        this.dialogVisible = true
        this.$nextTick(function() {
          document.as5.action = startUrlValue // 通过 form 的 name 获取表单，并将报表访问路径赋给表单的 action
          document.as5.submit() // 触发表单提交事件
        })
      }
    },
    closeVisible() {
      this.dialogVisible = false
    },

    // 科室
    handleGetDept(data) {
      var names = []; var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].deptname)
        codes.push(data[i].deptcode)
      }
      this.data.deptcode = codes
      this.data.deptname = names
    },
    // 清空科室
    clearhandleGetDept() {
      this.data.deptcode = []
      this.data.deptname = []
    },

    // 医疗组弹窗
    handleGetMedgroup(data) {
      var names = []
      var codes = []
      for (var i = 0; i < data.length; i++) {
        codes.push(data[i].medgroupcode)
        names.push(data[i].medgroupname)
      }
      this.data.medgroupCodes = codes
      this.data.medgroupCodesName = names
    },
    // 清空医疗组
    clearhandleGetMedgroup() {
      this.data.medgroupCodes = []
      this.data.medgroupCodesName = []
    },
    // 医生
    handleGetDoctor(data) {
      var names = []
      var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].doctorname)
        codes.push(data[i].doctorcode)
      }
      this.data.doctorCode = codes
      this.data.doctorName = names
    },
    // 清空医生
    clearhandleGetDoctor() {
      this.data.doctorCode = []
      this.data.doctorName = []
    },
    // 自定义药品属性
    handleGetDrugType(data) {
      var names = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].typename)
      }
      this.data.typeName = names
    },
    // 清空自定义药品
    clearhandleGetDrugType() {
      this.data.typeName = []
    },

    // 药品类别
    handleGetDrugDnc(data) {
      var names = []
      var codes = []
      for (var i = 0; i < data.length; i++) {
        names.push(data[i].classtitle)
        codes.push(data[i].classid)
      }
      this.data.clasStitle = names
      this.data.clasStitlecode = codes
    },
    // 清空药品类别
    clearhandleGetDrugDnc() {
      this.data.clasStitle = []
      this.data.clasStitlecode = []
    },

    // 药品
    handleGetDrug(data) {
      var names = []
      var codes = []
      for (var i = 0; i < data.length; i++) {
        codes.push(data[i].uniquecode)
        names.push(data[i].drugname)
      }
      this.data.uniqueCode = names
      this.data.uniqueCodecode = codes
    },
    // 清空药品
    clearhandleGetDrug() {
      this.data.uniqueCode = []
      this.data.uniqueCodecode = []
    },

    selectPop(val) {
      this.$refs.ptable.show()
      this.pType = val
    }
  }
}
</script>

<style scoped lang="scss">
  .query{
    width:100%;
    height:100%;
    background:#e6edf5;
    .check{
      font-size:12px;
      line-height:40px;
      background:#fff;
      text-align:center;
      .c_left{
        width:115px;
        float:left;
        line-height:65px;
      }
      .c_right{
        overflow:hidden;
        color:#636365;
        border-left:1px solid #e6edf5;
        padding:15px 0;
        position:relative;
        .show_btn{
          position:absolute;
          right:20px;
          bottom:15px;
          border:1px solid #e1e1e1;
          background:#f9fafc;
          border-radius:2px;
          text-align:center;
          line-height:32px;
          width:70px;
          height:32px;
          font-size:14px;
          color:#9f9f9f;
          cursor: pointer;
        }
        .fl{
          margin-bottom:10px;
          display: flex;
          align-content: center;
          align-items: center;
        }
        .c_tip{
          display:inline-block;
          width:80px;
          padding-right:10px;
          text-align:right;
        }
        .c_input{
          width:131px;
          height:40px;
          border:1px solid #dcdfe6;
          border-radius:4px;
          padding-left:5px;
        }
        .c_input::-webkit-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-ms-input-placeholder {
          color: #dcdfe6;
        }
        .c_input::-moz-input-placeholder {
          color: #dcdfe6;
        }
        .c_search{
          width:300px;
        }
        .c_searchbtn{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#28a4f4;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_searchbtn_clear{
          display:inline-block;
          width:34px;
          height:25px;
          margin-left:3px;
          background:#F56C6C;
          color:#fff;
          font-size:12px;
          text-align:center;
          line-height:26px;
          border-radius:6px;
          cursor:pointer;
        }
        .c_checkbox{
          width:400px;
          height:40px;
          margin-left: 5px;
          display: flex;
          justify-content: left;
        }
        .btn_clear{
          padding:0;
          width:150px;
          height:40px;
          line-height:40px;
        }
        .sbtn_box{
          text-align:left;
          padding-left:82px;
        }
        .c_select{
          width:130px;
        }
        @media screen and (min-width:1466px){
          .c_select{
            width:150px;
          }
          .btn_clear{
            padding:0;
            width:70px;
            height:40px;
            line-height:40px;
          }
          .c_input{
            width:150px;
          }
          .c_searchbtn{
            width:42px;
            margin-left:4px;
          }
          .c_tip{
            width:100px;
          }
        }
      }
    }
    .list_tip{
      font-size:14px;
      color:#29a4f2;
      padding: 2px;
    }
    .table_box{
      padding:0 18px;
    }
  }
  /deep/.el-checkbox__label{
    width: 100px;
    font-size: 12px;
  }
  /deep/.el-form-item__content{
    font-size: 12px;
  }
  /deep/.el-form-item{
    margin: 0;
  }
</style>
